<template>
    <div id="player" class="container"></div>
</template>
<script lang="ts">
import { watchEffect, defineComponent } from 'vue';
import WasmPlayer from '@easydarwin/easywasmplayer';

export default defineComponent({
    name: 'EasyPlayer',
    props: {
        data: {
            type: String,
            default: '',
        },
    },
    setup(props, { emit }) {
        let player;
        let timer = 0;

        const playCallBack = (e: string) => {
            emit('change', e);
        };

        const initEasyPlayer = () => {
            console.log(props.data);
            player = new WasmPlayer(props.data, 'player', playCallBack, {
                cbUserPtr: this,
                openAudio: false,
                Height: true,
                HideKbs: true,
            });
            player.play(props.data, 1);
        };

        watchEffect(() => {
            if (timer) clearTimeout(timer);
            if (props.data) {
                timer = window.setTimeout(() => {
                    initEasyPlayer();
                }, 500);
            }
        });
    },
});
</script>
<style scoped>
#player {
    width: 900px;
    height: 500px;
}
</style>
